



<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#FFF">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">

<link rel="icon" type="image/ico" sizes="32x32" href="/images/favicon.ico">
  <meta http-equiv="Cache-Control" content="no-transform">
  <meta http-equiv="Cache-Control" content="no-siteapp">


<link rel="alternate" type="application/rss+xml" title="逸尘" href="https://yichenm.github.io.git/rss.xml" />
<link rel="alternate" type="application/atom+xml" title="逸尘" href="https://yichenm.github.io.git/atom.xml" />
<link rel="alternate" type="application/json" title="逸尘" href="https://yichenm.github.io.git/feed.json" />

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Mulish:300,300italic,400,400italic,700,700italic%7CFredericka%20the%20Great:300,300italic,400,400italic,700,700italic%7CNoto%20Serif%20JP:300,300italic,400,400italic,700,700italic%7CNoto%20Serif%20SC:300,300italic,400,400italic,700,700italic%7CInconsolata:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">

<link rel="stylesheet" href="/css/app.css?v=0.2.5">

  
  <meta name="keywords" content="jQuery+CSS3,粒子特效" />


<link rel="canonical" href="https://yichenm.github.io.git/2020/03/27/blog/jQuery+CSS3/">


<meta name="description" content="# 前言 一款 jQuery+CSS3 的文字背景粒子动画特效，一共 6 种粒子效果，每种文字背景的粒子效果都不同，有漂浮的有坠落的等等。 # 0x001 特效演示  &lt;div style&#x3D;&quot;width: 100%;text-align: center; height: 120px; position: relative; bottom: 0px;&quot; &gt;&lt;sp">
<meta property="og:type" content="article">
<meta property="og:title" content="文字背景粒子特效">
<meta property="og:url" content="https://yichenm.github.io.git/2020/03/27/blog/jQuery+CSS3/index.html">
<meta property="og:site_name" content="逸尘">
<meta property="og:description" content="# 前言 一款 jQuery+CSS3 的文字背景粒子动画特效，一共 6 种粒子效果，每种文字背景的粒子效果都不同，有漂浮的有坠落的等等。 # 0x001 特效演示  &lt;div style&#x3D;&quot;width: 100%;text-align: center; height: 120px; position: relative; bottom: 0px;&quot; &gt;&lt;sp">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2020-03-26T16:00:00.000Z">
<meta property="article:modified_time" content="2021-08-24T08:10:38.629Z">
<meta property="article:author" content="逸尘">
<meta property="article:tag" content="jQuery+CSS3">
<meta property="article:tag" content="粒子特效">
<meta name="twitter:card" content="summary">


  <title>
文字背景粒子特效 - 前端篇 |
Yi Chen = 逸尘 = 逸尘の博客</title>
<meta name="generator" content="Hexo 5.4.0"></head>
<body itemscope itemtype="http://schema.org/WebPage">
  <div id="loading">
    <div class="cat">
      <div class="body"></div>
      <div class="head">
        <div class="face"></div>
      </div>
      <div class="foot">
        <div class="tummy-end"></div>
        <div class="bottom"></div>
        <div class="legs left"></div>
        <div class="legs right"></div>
      </div>
      <div class="paw">
        <div class="hands left"></div>
        <div class="hands right"></div>
      </div>
    </div>
  </div>
  <div id="container">
    <header id="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="inner">
        <div id="brand">
          <div class="pjax">
          
  <h1 itemprop="name headline">文字背景粒子特效
  </h1>
  
<div class="meta">
  <span class="item" title="创建时间：2020-03-27 00:00:00">
    <span class="icon">
      <i class="ic i-calendar"></i>
    </span>
    <span class="text">发表于</span>
    <time itemprop="dateCreated datePublished" datetime="2020-03-27T00:00:00+08:00">2020-03-27</time>
  </span>
</div>


          </div>
        </div>
        <nav id="nav">
  <div class="inner">
    <div class="toggle">
      <div class="lines" aria-label="切换导航栏">
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
      </div>
    </div>
    <ul class="menu">
      <li class="item title"><a href="/" rel="start">Yi Chen</a></li>
    </ul>
    <ul class="right">
      <li class="item theme">
        <i class="ic i-sun"></i>
      </li>
      <li class="item search">
        <i class="ic i-search"></i>
      </li>
    </ul>
  </div>
</nav>

      </div>
      <div id="imgs" class="pjax">
        <ul>
          <li class="item" data-background-image="https://tva1.sinaimg.cn/large/6833939bly1gipew28b65j20zk0m8hdt.jpg"></li>
          <li class="item" data-background-image="https://tva1.sinaimg.cn/large/6833939bly1giclip4jbpj20zk0m87cv.jpg"></li>
          <li class="item" data-background-image="https://tva1.sinaimg.cn/large/6833939bly1gipevgoki5j20zk0m84qp.jpg"></li>
          <li class="item" data-background-image="https://tva1.sinaimg.cn/large/6833939bly1gipetv6p75j20zk0m8x6p.jpg"></li>
          <li class="item" data-background-image="https://tva1.sinaimg.cn/large/6833939bly1gipesrnqv3j20zk0m8ava.jpg"></li>
          <li class="item" data-background-image="https://tva1.sinaimg.cn/large/6833939bly1gicljgocqbj20zk0m8e81.jpg"></li>
        </ul>
      </div>
    </header>
    <div id="waves">
      <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
        <defs>
          <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
        </defs>
        <g class="parallax">
          <use xlink:href="#gentle-wave" x="48" y="0" />
          <use xlink:href="#gentle-wave" x="48" y="3" />
          <use xlink:href="#gentle-wave" x="48" y="5" />
          <use xlink:href="#gentle-wave" x="48" y="7" />
        </g>
      </svg>
    </div>
    <main>
      <div class="inner">
        <div id="main" class="pjax">
          
  <div class="article wrap">
    
<div class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
<i class="ic i-home"></i>
<span><a href="/">首页</a></span><i class="ic i-angle-right"></i>
<span  class="current" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="/categories/%E5%89%8D%E7%AB%AF%E7%AF%87/" itemprop="item" rel="index" title="分类于 前端篇"><span itemprop="name">前端篇</span></a>
<meta itemprop="position" content="1" /></span>
</div>

    <article itemscope itemtype="http://schema.org/Article" class="post block" lang="zh-CN">
  <link itemprop="mainEntityOfPage" href="https://yichenm.github.io.git/2020/03/27/blog/jQuery+CSS3/">

  <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
    <meta itemprop="image" content="/images/avatar.jpg">
    <meta itemprop="name" content="逸尘">
    <meta itemprop="description" content="逸尘の博客, 专注于编程,分享生活,分享知识">
  </span>

  <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
    <meta itemprop="name" content="逸尘">
  </span>

  <div class="body md" itemprop="articleBody">
    

    <h3 id="前言"><a class="anchor" href="#前言">#</a> 前言</h3>
<p>一款 jQuery+CSS3 的文字背景粒子动画特效，一共 6 种粒子效果，每种文字背景的粒子效果都不同，有漂浮的有坠落的等等。</p>
<h3 id="0x001-特效演示"><a class="anchor" href="#0x001-特效演示">#</a> 0x001 特效演示</h3>
<hr />
<p>&lt;div style=&quot;width: 100%;text-align: center; height: 120px; position: relative; bottom: 0px;&quot; &gt;&lt;span class=&quot;particletext fire&quot; style=&quot;font-size:48px;position: relative;&quot;&gt;This is fires&lt;/span&gt;&lt;/div&gt;</p>
<p>&lt;div style=&quot;width: 100%;text-align: center; height: 120px; position: relative; bottom: 0px;&quot; &gt; &lt;span class=&quot;particletext lines&quot; style=&quot;font-size:48px; position: relative;&quot;&gt;This is lines&lt;/span&gt;<br />
&lt;/div&gt;</p>
<p>&lt;div style=&quot;width: 100%;text-align: center; height: 120px; position: relative; bottom: 0px;&quot; &gt;&lt;span class=&quot;particletext hearts&quot; style=&quot;font-size:48px; position: relative;&quot;&gt;This is hearts&lt;/span&gt;&lt;/div&gt;</p>
<p>&lt;div style=&quot;width: 100%;text-align: center; height: 120px; position: relative; bottom: 0px;&quot; &gt; &lt;span class=&quot;particletext bubbles&quot; style=&quot;font-size:48px; position: relative;&quot;&gt;This is bubbles&lt;/span&gt;<br />
&lt;/div&gt;</p>
<p>&lt;div style=&quot;width: 100%;text-align: center; height: 120px; position: relative; bottom: 0px;&quot; &gt; &lt;span class=&quot;particletext confetti&quot; style=&quot;font-size:48px; position: relative;&quot;&gt;This is confetti&lt;/span&gt;<br />
&lt;/div&gt;</p>
<p>&lt;div style=&quot;width: 100%;text-align: center; height: 120px; position: relative; bottom: 0px;&quot; &gt; &lt;span class=&quot;particletext sunbeams&quot; style=&quot;font-size:48px; position: relative;&quot;&gt;This is sunbeams&lt;/span&gt;<br />
&lt;/div&gt;</p>
<p>&lt;style&gt;</p>
<p>.particletext {</p>
<p>}</p>
<p>.fire &gt; .particle {<br />
position: absolute;<br />
background-color: rgba(255, 193, 7, 0.5);<br />
border-radius: 40px;<br />
border-top-right-radius: 0px;<br />
-webkit-animation: fires 0.8s linear infinite;<br />
animation: fires 0.8s linear infinite;<br />
-webkit-transform: rotate(-45deg);<br />
transform: rotate(-45deg);<br />
opacity: 0;<br />
}<br />
/<em>css keyframes 动画</em> /<br />
@-webkit-keyframes fires {<br />
0% {<br />
-webkit-transform: rotate(-70deg) translateY(0%);<br />
transform: rotate(-70deg) translateY(0%);<br />
}<br />
25% {<br />
-webkit-transform: rotate(-20deg) translateY(-5%);<br />
transform: rotate(-20deg) translateY(-5%);<br />
opacity: 1;<br />
}<br />
50% {<br />
-webkit-transform: rotate(-70deg) translateY(-10%);<br />
transform: rotate(-70deg) translateY(-10%);<br />
}<br />
75% {<br />
-webkit-transform: rotate(-20deg) translateY(-20%);<br />
transform: rotate(-20deg) translateY(-20%);<br />
}<br />
100% {<br />
-webkit-transform: rotate(-70deg) translateY(-40%);<br />
transform: rotate(-70deg) translateY(-40%);<br />
opacity: 1;<br />
}<br />
}<br />
@keyframes fires {<br />
0% {<br />
-webkit-transform: rotate(-70deg) translateY(0%);<br />
transform: rotate(-70deg) translateY(0%);<br />
}<br />
25% {<br />
-webkit-transform: rotate(-20deg) translateY(-5%);<br />
transform: rotate(-20deg) translateY(-5%);<br />
opacity: 1;<br />
}<br />
50% {<br />
-webkit-transform: rotate(-70deg) translateY(-10%);<br />
transform: rotate(-70deg) translateY(-10%);<br />
}<br />
75% {<br />
-webkit-transform: rotate(-20deg) translateY(-20%);<br />
transform: rotate(-20deg) translateY(-20%);<br />
}<br />
100% {<br />
-webkit-transform: rotate(-70deg) translateY(-40%);<br />
transform: rotate(-70deg) translateY(-40%);<br />
opacity: 1;<br />
}<br />
}<br />
&lt;/style&gt;</p>
<p>&lt;script type=&quot;text/javascript&quot; src=&quot;<span class="exturl" data-url="aHR0cHM6Ly9jb2RlLmpxdWVyeS5jb20vanF1ZXJ5LTMuMS4xLm1pbi5qcw==">https://code.jquery.com/jquery-3.1.1.min.js</span>&quot;&gt;&lt;/script&gt;<br />
&lt;script&gt;<br />
function fire() {<br />
<span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi mathvariant="normal">.</mi><mi>e</mi><mi>a</mi><mi>c</mi><mi>h</mi><mo stretchy="false">(</mo></mrow><annotation encoding="application/x-tex">.each(</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1em;vertical-align:-0.25em;"></span><span class="mord">.</span><span class="mord mathnormal">e</span><span class="mord mathnormal">a</span><span class="mord mathnormal">c</span><span class="mord mathnormal">h</span><span class="mopen">(</span></span></span></span>(&quot;.particletext.fire&quot;), function(){<br />
var firecount = ($(this).width()/50)*20;<br />
for(var i = 0; i &lt;= firecount; i++) {<br />
var size = $.rnd(8,12);<br />
$(this).append('&lt;span class=&quot;particle&quot; style=&quot;top:' + $.rnd(40,70) + '%; left:' + <span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi mathvariant="normal">.</mi><mi>r</mi><mi>n</mi><mi>d</mi><mo stretchy="false">(</mo><mo>−</mo><mn>10</mn><mo separator="true">,</mo><mn>100</mn><mo stretchy="false">)</mo><msup><mo>+</mo><mo mathvariant="normal" lspace="0em" rspace="0em">′</mo></msup></mrow><annotation encoding="application/x-tex">.rnd(-10,100) + &#x27;%;width:&#x27; + size + &#x27;px; height:&#x27; + size + &#x27;px;animation-delay: &#x27; + (</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1.001892em;vertical-align:-0.25em;"></span><span class="mord">.</span><span class="mord mathnormal" style="margin-right:0.02778em;">r</span><span class="mord mathnormal">n</span><span class="mord mathnormal">d</span><span class="mopen">(</span><span class="mord">−</span><span class="mord">1</span><span class="mord">0</span><span class="mpunct">,</span><span class="mspace" style="margin-right:0.16666666666666666em;"></span><span class="mord">1</span><span class="mord">0</span><span class="mord">0</span><span class="mclose">)</span><span class="mord"><span class="mbin">+</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.751892em;"><span style="top:-3.063em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mtight">′</span></span></span></span></span></span></span></span></span></span></span></span>.rnd(0,20)/10) + 's;&quot;&gt;&lt;/span&gt;');<br />
}<br />
});<br />
}</p>
<p>&lt;/script&gt;</p>
<p>&lt;style&gt;<br />
.lines &gt; .particle {<br />
position: absolute;<br />
background-color: rgba(244, 67, 54, 0.5);<br />
-webkit-animation: lines 3s linear infinite;<br />
animation: lines 3s linear infinite;<br />
}<br />
@-webkit-keyframes lines {<br />
0%, 50%, 100% {<br />
-webkit-transform: translateY(0%);<br />
transform: translateY(0%);<br />
}<br />
25% {<br />
-webkit-transform: translateY(100%);<br />
transform: translateY(100%);<br />
}<br />
75% {<br />
-webkit-transform: translateY(-100%);<br />
transform: translateY(-100%);<br />
}<br />
}<br />
@keyframes lines {<br />
0%, 50%, 100% {<br />
-webkit-transform: translateY(0%);<br />
transform: translateY(0%);<br />
}<br />
25% {<br />
-webkit-transform: translateY(100%);<br />
transform: translateY(100%);<br />
}<br />
75% {<br />
-webkit-transform: translateY(-100%);<br />
transform: translateY(-100%);<br />
}<br />
}<br />
&lt;/style&gt;</p>
<p>&lt;script&gt;<br />
function lines() {<br />
<span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi mathvariant="normal">.</mi><mi>e</mi><mi>a</mi><mi>c</mi><mi>h</mi><mo stretchy="false">(</mo></mrow><annotation encoding="application/x-tex">.each(</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1em;vertical-align:-0.25em;"></span><span class="mord">.</span><span class="mord mathnormal">e</span><span class="mord mathnormal">a</span><span class="mord mathnormal">c</span><span class="mord mathnormal">h</span><span class="mopen">(</span></span></span></span>(&quot;.particletext.lines&quot;), function(){<br />
var linecount = ($(this).width()/50)*10;<br />
for(var i = 0; i &lt;= linecount; i++) {<br />
$(this).append('&lt;span class=&quot;particle&quot; style=&quot;top:' + $.rnd(-30,30) + '%; left:' + $.rnd(-10,110) + '%;width:' + $.rnd(1,3) + 'px; height:' + <span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi mathvariant="normal">.</mi><mi>r</mi><mi>n</mi><mi>d</mi><mo stretchy="false">(</mo><mn>20</mn><mo separator="true">,</mo><mn>80</mn><mo stretchy="false">)</mo><msup><mo>+</mo><mo mathvariant="normal" lspace="0em" rspace="0em">′</mo></msup></mrow><annotation encoding="application/x-tex">.rnd(20,80) + &#x27;%;animation-delay: -&#x27; + (</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1.001892em;vertical-align:-0.25em;"></span><span class="mord">.</span><span class="mord mathnormal" style="margin-right:0.02778em;">r</span><span class="mord mathnormal">n</span><span class="mord mathnormal">d</span><span class="mopen">(</span><span class="mord">2</span><span class="mord">0</span><span class="mpunct">,</span><span class="mspace" style="margin-right:0.16666666666666666em;"></span><span class="mord">8</span><span class="mord">0</span><span class="mclose">)</span><span class="mord"><span class="mbin">+</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.751892em;"><span style="top:-3.063em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mtight">′</span></span></span></span></span></span></span></span></span></span></span></span>.rnd(0,30)/10) + 's;&quot;&gt;&lt;/span&gt;');<br />
}<br />
});<br />
}</p>
<p>&lt;/script&gt;</p>
<p>&lt;style&gt;<br />
.hearts &gt; .particle {<br />
opacity: 0;<br />
position: absolute;<br />
background-color: #cc2a5d;<br />
-webkit-animation: hearts 3s ease-in infinite;<br />
animation: hearts 3s ease-in infinite;<br />
}<br />
.hearts &gt; .particle:before,.hearts &gt; .particle:after {<br />
position: absolute;<br />
content: '';<br />
border-radius: 100px;<br />
top: 0px;<br />
left: 0px;<br />
width: 100%;<br />
height: 100%;<br />
background-color: #cc2a5d;<br />
}<br />
.hearts &gt; .particle:before {<br />
-webkit-transform: translateX(-50%);<br />
transform: translateX(-50%);<br />
}<br />
.hearts &gt; .particle:after {<br />
-webkit-transform: translateY(-50%);<br />
transform: translateY(-50%);<br />
}<br />
@-webkit-keyframes hearts {<br />
0% {<br />
opacity: 0;<br />
-webkit-transform: translate(0, 0%) rotate(45deg);<br />
transform: translate(0, 0%) rotate(45deg);<br />
}<br />
20% {<br />
opacity: 0.8;<br />
-webkit-transform: translate(0, -20%) rotate(45deg);<br />
transform: translate(0, -20%) rotate(45deg);<br />
}<br />
100% {<br />
opacity: 0;<br />
-webkit-transform: translate(0, -1000%) rotate(45deg);<br />
transform: translate(0, -1000%) rotate(45deg);<br />
}<br />
}<br />
@keyframes hearts {<br />
0% {<br />
opacity: 0;<br />
-webkit-transform: translate(0, 0%) rotate(45deg);<br />
transform: translate(0, 0%) rotate(45deg);<br />
}<br />
20% {<br />
opacity: 0.8;<br />
-webkit-transform: translate(0, -20%) rotate(45deg);<br />
transform: translate(0, -20%) rotate(45deg);<br />
}<br />
100% {<br />
opacity: 0;<br />
-webkit-transform: translate(0, -1000%) rotate(45deg);<br />
transform: translate(0, -1000%) rotate(45deg);<br />
}<br />
}<br />
&lt;/style&gt;</p>
<p>&lt;script&gt;<br />
function hearts() {<br />
<span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi mathvariant="normal">.</mi><mi>e</mi><mi>a</mi><mi>c</mi><mi>h</mi><mo stretchy="false">(</mo></mrow><annotation encoding="application/x-tex">.each(</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1em;vertical-align:-0.25em;"></span><span class="mord">.</span><span class="mord mathnormal">e</span><span class="mord mathnormal">a</span><span class="mord mathnormal">c</span><span class="mord mathnormal">h</span><span class="mopen">(</span></span></span></span>(&quot;.particletext.hearts&quot;), function(){<br />
var heartcount = ((this).width()/50)*5; 
      for(var i = 0; i <= heartcount; i++) { 
         var size = (.rnd(60,120)/10);<br />
$(this).append('&lt;span class=&quot;particle&quot; style=&quot;top:' + $.rnd(20,80) + '%; left:' + <span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi mathvariant="normal">.</mi><mi>r</mi><mi>n</mi><mi>d</mi><mo stretchy="false">(</mo><mn>0</mn><mo separator="true">,</mo><mn>95</mn><mo stretchy="false">)</mo><msup><mo>+</mo><mo mathvariant="normal" lspace="0em" rspace="0em">′</mo></msup></mrow><annotation encoding="application/x-tex">.rnd(0,95) + &#x27;%;width:&#x27; + size + &#x27;px; height:&#x27; + size + &#x27;px;animation-delay: &#x27; + (</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1.001892em;vertical-align:-0.25em;"></span><span class="mord">.</span><span class="mord mathnormal" style="margin-right:0.02778em;">r</span><span class="mord mathnormal">n</span><span class="mord mathnormal">d</span><span class="mopen">(</span><span class="mord">0</span><span class="mpunct">,</span><span class="mspace" style="margin-right:0.16666666666666666em;"></span><span class="mord">9</span><span class="mord">5</span><span class="mclose">)</span><span class="mord"><span class="mbin">+</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.751892em;"><span style="top:-3.063em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mtight">′</span></span></span></span></span></span></span></span></span></span></span></span>.rnd(0,30)/10) + 's;&quot;&gt;&lt;/span&gt;');<br />
}<br />
});<br />
}</p>
<p>&lt;/script&gt;</p>
<p>&lt;style&gt;<br />
.bubbles &gt; .particle {<br />
opacity: 0;<br />
position: absolute;<br />
background-color: rgba(33, 150, 243, 0.5);<br />
-webkit-animation: bubbles 3s ease-in infinite;<br />
animation: bubbles 3s ease-in infinite;<br />
border-radius: 100%;<br />
}<br />
@-webkit-keyframes bubbles {<br />
0% {<br />
opacity: 0;<br />
}<br />
20% {<br />
opacity: 1;<br />
-webkit-transform: translate(0, -20%);<br />
transform: translate(0, -20%);<br />
}<br />
100% {<br />
opacity: 0;<br />
-webkit-transform: translate(0, -1000%);<br />
transform: translate(0, -1000%);<br />
}<br />
}</p>
<p>@keyframes bubbles {<br />
0% {<br />
opacity: 0;<br />
}<br />
20% {<br />
opacity: 1;<br />
-webkit-transform: translate(0, -20%);<br />
transform: translate(0, -20%);<br />
}<br />
100% {<br />
opacity: 0;<br />
-webkit-transform: translate(0, -1000%);<br />
transform: translate(0, -1000%);<br />
}<br />
}<br />
&lt;/style&gt;</p>
<p>&lt;script&gt;<br />
function bubbles() {<br />
<span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi mathvariant="normal">.</mi><mi>e</mi><mi>a</mi><mi>c</mi><mi>h</mi><mo stretchy="false">(</mo></mrow><annotation encoding="application/x-tex">.each(</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1em;vertical-align:-0.25em;"></span><span class="mord">.</span><span class="mord mathnormal">e</span><span class="mord mathnormal">a</span><span class="mord mathnormal">c</span><span class="mord mathnormal">h</span><span class="mopen">(</span></span></span></span>(&quot;.particletext.bubbles&quot;), function(){<br />
var bubblecount = ((this).width()/50)*10; 
      for(var i = 0; i <= bubblecount; i++) { 
         var size = (.rnd(40,80)/10);<br />
$(this).append('&lt;span class=&quot;particle&quot; style=&quot;top:' + $.rnd(20,80) + '%; left:' + <span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi mathvariant="normal">.</mi><mi>r</mi><mi>n</mi><mi>d</mi><mo stretchy="false">(</mo><mn>0</mn><mo separator="true">,</mo><mn>95</mn><mo stretchy="false">)</mo><msup><mo>+</mo><mo mathvariant="normal" lspace="0em" rspace="0em">′</mo></msup></mrow><annotation encoding="application/x-tex">.rnd(0,95) + &#x27;%;width:&#x27; + size + &#x27;px; height:&#x27; + size + &#x27;px;animation-delay: &#x27; + (</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1.001892em;vertical-align:-0.25em;"></span><span class="mord">.</span><span class="mord mathnormal" style="margin-right:0.02778em;">r</span><span class="mord mathnormal">n</span><span class="mord mathnormal">d</span><span class="mopen">(</span><span class="mord">0</span><span class="mpunct">,</span><span class="mspace" style="margin-right:0.16666666666666666em;"></span><span class="mord">9</span><span class="mord">5</span><span class="mclose">)</span><span class="mord"><span class="mbin">+</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.751892em;"><span style="top:-3.063em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mtight">′</span></span></span></span></span></span></span></span></span></span></span></span>.rnd(0,30)/10) + 's;&quot;&gt;&lt;/span&gt;');<br />
}<br />
});<br />
}</p>
<p>&lt;/script&gt;</p>
<p>&lt;style&gt;<br />
.confetti &gt; .particle {<br />
opacity: 0;<br />
position: absolute;<br />
-webkit-animation: confetti 3s ease-in infinite;<br />
animation: confetti 3s ease-in infinite;<br />
}<br />
.confetti &gt; .particle.c1 {<br />
background-color: rgba(76, 175, 80, 0.5);<br />
}<br />
.confetti &gt; .particle.c2 {<br />
background-color: rgba(156, 39, 176, 0.5);<br />
}<br />
@-webkit-keyframes confetti {<br />
0% {<br />
opacity: 0;<br />
-webkit-transform: translateY(0%) rotate(0deg);<br />
transform: translateY(0%) rotate(0deg);<br />
}<br />
10% {<br />
opacity: 1;<br />
}<br />
35% {<br />
-webkit-transform: translateY(-800%) rotate(270deg);<br />
transform: translateY(-800%) rotate(270deg);<br />
}<br />
80% {<br />
opacity: 1;<br />
}<br />
100% {<br />
opacity: 0;<br />
-webkit-transform: translateY(2000%) rotate(1440deg);<br />
transform: translateY(2000%) rotate(1440deg);<br />
}<br />
}<br />
@keyframes confetti {<br />
0% {<br />
opacity: 0;<br />
-webkit-transform: translateY(0%) rotate(0deg);<br />
transform: translateY(0%) rotate(0deg);<br />
}<br />
10% {<br />
opacity: 1;<br />
}<br />
35% {<br />
-webkit-transform: translateY(-800%) rotate(270deg);<br />
transform: translateY(-800%) rotate(270deg);<br />
}<br />
80% {<br />
opacity: 1;<br />
}<br />
100% {<br />
opacity: 0;<br />
-webkit-transform: translateY(2000%) rotate(1440deg);<br />
transform: translateY(2000%) rotate(1440deg);<br />
}<br />
}<br />
&lt;/style&gt;</p>
<p>&lt;script&gt;<br />
function confetti() {<br />
<span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi mathvariant="normal">.</mi><mi>e</mi><mi>a</mi><mi>c</mi><mi>h</mi><mo stretchy="false">(</mo></mrow><annotation encoding="application/x-tex">.each(</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1em;vertical-align:-0.25em;"></span><span class="mord">.</span><span class="mord mathnormal">e</span><span class="mord mathnormal">a</span><span class="mord mathnormal">c</span><span class="mord mathnormal">h</span><span class="mopen">(</span></span></span></span>(&quot;.particletext.confetti&quot;), function(){<br />
var confetticount = ($(this).width()/50)*10;<br />
for(var i = 0; i &lt;= confetticount; i++) {<br />
$(this).append('&lt;span class=&quot;particle c' + $.rnd(1,2) + '&quot; style=&quot;top:' + $.rnd(10,50) + '%; left:' + $.rnd(0,100) + '%;width:' + $.rnd(6,8) + 'px; height:' + <span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi mathvariant="normal">.</mi><mi>r</mi><mi>n</mi><mi>d</mi><mo stretchy="false">(</mo><mn>3</mn><mo separator="true">,</mo><mn>4</mn><mo stretchy="false">)</mo><msup><mo>+</mo><mo mathvariant="normal" lspace="0em" rspace="0em">′</mo></msup><mi>p</mi><mi>x</mi><mo separator="true">;</mo><mi>a</mi><mi>n</mi><mi>i</mi><mi>m</mi><mi>a</mi><mi>t</mi><mi>i</mi><mi>o</mi><mi>n</mi><mo>−</mo><mi>d</mi><mi>e</mi><mi>l</mi><mi>a</mi><mi>y</mi><msup><mo>:</mo><mo mathvariant="normal" lspace="0em" rspace="0em">′</mo></msup><mo>+</mo><mo stretchy="false">(</mo></mrow><annotation encoding="application/x-tex">.rnd(3,4) + &#x27;px;animation-delay: &#x27; + (</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1.001892em;vertical-align:-0.25em;"></span><span class="mord">.</span><span class="mord mathnormal" style="margin-right:0.02778em;">r</span><span class="mord mathnormal">n</span><span class="mord mathnormal">d</span><span class="mopen">(</span><span class="mord">3</span><span class="mpunct">,</span><span class="mspace" style="margin-right:0.16666666666666666em;"></span><span class="mord">4</span><span class="mclose">)</span><span class="mspace" style="margin-right:0.2222222222222222em;"></span><span class="mbin"><span class="mbin">+</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.751892em;"><span style="top:-3.063em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mtight">′</span></span></span></span></span></span></span></span></span><span class="mspace" style="margin-right:0.2222222222222222em;"></span></span><span class="base"><span class="strut" style="height:0.85396em;vertical-align:-0.19444em;"></span><span class="mord mathnormal">p</span><span class="mord mathnormal">x</span><span class="mpunct">;</span><span class="mspace" style="margin-right:0.16666666666666666em;"></span><span class="mord mathnormal">a</span><span class="mord mathnormal">n</span><span class="mord mathnormal">i</span><span class="mord mathnormal">m</span><span class="mord mathnormal">a</span><span class="mord mathnormal">t</span><span class="mord mathnormal">i</span><span class="mord mathnormal">o</span><span class="mord mathnormal">n</span><span class="mspace" style="margin-right:0.2222222222222222em;"></span><span class="mbin">−</span><span class="mspace" style="margin-right:0.2222222222222222em;"></span></span><span class="base"><span class="strut" style="height:0.946332em;vertical-align:-0.19444em;"></span><span class="mord mathnormal">d</span><span class="mord mathnormal">e</span><span class="mord mathnormal" style="margin-right:0.01968em;">l</span><span class="mord mathnormal">a</span><span class="mord mathnormal" style="margin-right:0.03588em;">y</span><span class="mspace" style="margin-right:0.2777777777777778em;"></span><span class="mrel"><span class="mrel">:</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.751892em;"><span style="top:-3.063em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mtight">′</span></span></span></span></span></span></span></span></span><span class="mspace" style="margin-right:0.2777777777777778em;"></span></span><span class="base"><span class="strut" style="height:1em;vertical-align:-0.25em;"></span><span class="mord">+</span><span class="mopen">(</span></span></span></span>.rnd(0,30)/10) + 's;&quot;&gt;&lt;/span&gt;');<br />
}<br />
});<br />
}</p>
<p>&lt;/script&gt;</p>
<p>&lt;style&gt;<br />
.sunbeams &gt; .particle {<br />
position: absolute;<br />
background-color: rgba(253, 216, 53, 0.5);<br />
-webkit-animation: sunbeams 3s linear infinite;<br />
animation: sunbeams 3s linear infinite;<br />
}<br />
@-webkit-keyframes sunbeams {<br />
0% {<br />
-webkit-transform: translateY(40%) rotate(0deg);<br />
transform: translateY(40%) rotate(0deg);<br />
}<br />
50% {<br />
-webkit-transform: translateY(-40%) rotate(180deg);<br />
transform: translateY(-40%) rotate(180deg);<br />
}<br />
100% {<br />
-webkit-transform: translateY(40%) rotate(360deg);<br />
transform: translateY(40%) rotate(360deg);<br />
}<br />
0%,14%,17%,43%,53%,71%,80%,94%,100% {<br />
opacity: 0;<br />
}<br />
6%,15%,24%,28%,48%,55%,78%,82%,99% {<br />
opacity: 1;<br />
}<br />
}<br />
@keyframes sunbeams {<br />
0% {<br />
-webkit-transform: translateY(40%) rotate(0deg);<br />
transform: translateY(40%) rotate(0deg);<br />
}<br />
50% {<br />
-webkit-transform: translateY(-40%) rotate(180deg);<br />
transform: translateY(-40%) rotate(180deg);<br />
}<br />
100% {<br />
-webkit-transform: translateY(40%) rotate(360deg);<br />
transform: translateY(40%) rotate(360deg);<br />
}<br />
0%,14%,17%,43%,53%,71%,80%,94%,100% {<br />
opacity: 0;<br />
}<br />
6%,15%,24%,28%,48%,55%,78%,82%,99% {<br />
opacity: 1;<br />
}<br />
}<br />
&lt;/style&gt;</p>
<p>&lt;script&gt;<br />
function sunbeams() {<br />
<span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi mathvariant="normal">.</mi><mi>e</mi><mi>a</mi><mi>c</mi><mi>h</mi><mo stretchy="false">(</mo></mrow><annotation encoding="application/x-tex">.each(</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1em;vertical-align:-0.25em;"></span><span class="mord">.</span><span class="mord mathnormal">e</span><span class="mord mathnormal">a</span><span class="mord mathnormal">c</span><span class="mord mathnormal">h</span><span class="mopen">(</span></span></span></span>(&quot;.particletext.sunbeams&quot;), function(){<br />
var linecount = ($(this).width()/50)*10;<br />
for(var i = 0; i &lt;= linecount; i++) {<br />
$(this).append('&lt;span class=&quot;particle&quot; style=&quot;top:' + $.rnd(-50,00) + '%; left:' + $.rnd(0,100) + '%;width:' + $.rnd(1,3) + 'px; height:' + <span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi mathvariant="normal">.</mi><mi>r</mi><mi>n</mi><mi>d</mi><mo stretchy="false">(</mo><mn>80</mn><mo separator="true">,</mo><mn>160</mn><mo stretchy="false">)</mo><msup><mo>+</mo><mo mathvariant="normal" lspace="0em" rspace="0em">′</mo></msup></mrow><annotation encoding="application/x-tex">.rnd(80,160) + &#x27;%;animation-delay: -&#x27; + (</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1.001892em;vertical-align:-0.25em;"></span><span class="mord">.</span><span class="mord mathnormal" style="margin-right:0.02778em;">r</span><span class="mord mathnormal">n</span><span class="mord mathnormal">d</span><span class="mopen">(</span><span class="mord">8</span><span class="mord">0</span><span class="mpunct">,</span><span class="mspace" style="margin-right:0.16666666666666666em;"></span><span class="mord">1</span><span class="mord">6</span><span class="mord">0</span><span class="mclose">)</span><span class="mord"><span class="mbin">+</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.751892em;"><span style="top:-3.063em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mtight">′</span></span></span></span></span></span></span></span></span></span></span></span>.rnd(0,30)/10) + 's;&quot;&gt;&lt;/span&gt;');<br />
}<br />
});<br />
}</p>
<p>&lt;/script&gt;</p>
<p>&lt;script type=&quot;text/javascript&quot;&gt;<br />
function initparticles() {<br />
bubbles();<br />
hearts();<br />
lines();<br />
confetti();<br />
fire();<br />
sunbeams();<br />
}<br />
jQuery.rnd = function(m,n) {<br />
m = parseInt(m);<br />
n = parseInt(n);<br />
return Math.floor( Math.random() * (n - m + 1) ) + m;<br />
}<br />
initparticles();<br />
&lt;/script&gt;</p>
<h3 id="0x002-fires-特效"><a class="anchor" href="#0x002-fires-特效">#</a> 0x002 Fires 特效</h3>
<h4 id="1-js-代码"><a class="anchor" href="#1-js-代码">#</a> 1. JS 代码</h4>
<figure class="highlight javascript"><figcaption data-lang="javascript"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token operator">&lt;</span>script<span class="token operator">></span></pre></td></tr><tr><td data-num="2"></td><td><pre><span class="token keyword">function</span> <span class="token function">fire</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span> </pre></td></tr><tr><td data-num="3"></td><td><pre>   $<span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".particletext.fire"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span> </pre></td></tr><tr><td data-num="4"></td><td><pre>      <span class="token keyword">var</span> firecount <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">width</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">/</span><span class="token number">50</span><span class="token punctuation">)</span><span class="token operator">*</span><span class="token number">20</span><span class="token punctuation">;</span> </pre></td></tr><tr><td data-num="5"></td><td><pre>      <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;=</span> firecount<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span> </pre></td></tr><tr><td data-num="6"></td><td><pre>         <span class="token keyword">var</span> size <span class="token operator">=</span> $<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">8</span><span class="token punctuation">,</span><span class="token number">12</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </pre></td></tr><tr><td data-num="7"></td><td><pre>         <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">'&lt;span class="particle" style="top:'</span> <span class="token operator">+</span> $<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">40</span><span class="token punctuation">,</span><span class="token number">70</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'%; left:'</span> <span class="token operator">+</span> $<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">10</span><span class="token punctuation">,</span><span class="token number">100</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'%;width:'</span> <span class="token operator">+</span> size <span class="token operator">+</span> <span class="token string">'px; height:'</span> <span class="token operator">+</span> size <span class="token operator">+</span> <span class="token string">'px;animation-delay: '</span> <span class="token operator">+</span> <span class="token punctuation">(</span>$<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">20</span><span class="token punctuation">)</span><span class="token operator">/</span><span class="token number">10</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'s;">&lt;/span>'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </pre></td></tr><tr><td data-num="8"></td><td><pre>      <span class="token punctuation">&#125;</span> </pre></td></tr><tr><td data-num="9"></td><td><pre>   <span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </pre></td></tr><tr><td data-num="10"></td><td><pre><span class="token punctuation">&#125;</span> </pre></td></tr><tr><td data-num="11"></td><td><pre>  jQuery<span class="token punctuation">.</span><span class="token function-variable function">rnd</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">m<span class="token punctuation">,</span>n</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="12"></td><td><pre>      m <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>m<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="13"></td><td><pre>      n <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="14"></td><td><pre>      <span class="token keyword">return</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token punctuation">(</span>n <span class="token operator">-</span> m <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token operator">+</span> m<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="15"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="16"></td><td><pre>  <span class="token function">fire</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="17"></td><td><pre><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span></pre></td></tr></table></figure><h4 id="2-css-代码"><a class="anchor" href="#2-css-代码">#</a> 2. CSS 代码</h4>
<figure class="highlight css"><figcaption data-lang="CSS"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token selector">&lt;style></pre></td></tr><tr><td data-num="2"></td><td><pre>.fire > .particle</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="3"></td><td><pre>  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="4"></td><td><pre>  <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 193<span class="token punctuation">,</span> 7<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="5"></td><td><pre>  <span class="token property">border-radius</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="6"></td><td><pre>  <span class="token property">border-top-right-radius</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="7"></td><td><pre>  <span class="token property">-webkit-animation</span><span class="token punctuation">:</span> fires 0.8s linear infinite<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="8"></td><td><pre>          <span class="token property">animation</span><span class="token punctuation">:</span> fires 0.8s linear infinite<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="9"></td><td><pre>  <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-45deg<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="10"></td><td><pre>          <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-45deg<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="11"></td><td><pre>  <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="12"></td><td><pre><span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="13"></td><td><pre></pre></td></tr><tr><td data-num="14"></td><td><pre><span class="token atrule"><span class="token rule">@-webkit-keyframes</span> fires</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="15"></td><td><pre>  <span class="token selector">0%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="16"></td><td><pre>    <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-70deg<span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>0%<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="17"></td><td><pre>            <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-70deg<span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>0%<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="18"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="19"></td><td><pre>  <span class="token selector">25%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="20"></td><td><pre>    <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-20deg<span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-5%<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="21"></td><td><pre>            <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-20deg<span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-5%<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="22"></td><td><pre>    <span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="23"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="24"></td><td><pre>  <span class="token selector">50%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="25"></td><td><pre>    <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-70deg<span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-10%<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="26"></td><td><pre>            <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-70deg<span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-10%<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="27"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="28"></td><td><pre>  <span class="token selector">75%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="29"></td><td><pre>    <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-20deg<span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-20%<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="30"></td><td><pre>            <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-20deg<span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-20%<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="31"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="32"></td><td><pre>  <span class="token selector">100%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="33"></td><td><pre>    <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-70deg<span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-40%<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="34"></td><td><pre>            <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-70deg<span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-40%<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="35"></td><td><pre>    <span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="36"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="37"></td><td><pre><span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="38"></td><td><pre><span class="token atrule"><span class="token rule">@keyframes</span> fires</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="39"></td><td><pre>  <span class="token selector">0%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="40"></td><td><pre>    <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-70deg<span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>0%<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="41"></td><td><pre>            <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-70deg<span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>0%<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="42"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="43"></td><td><pre>  <span class="token selector">25%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="44"></td><td><pre>    <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-20deg<span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-5%<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="45"></td><td><pre>            <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-20deg<span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-5%<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="46"></td><td><pre>    <span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="47"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="48"></td><td><pre>  <span class="token selector">50%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="49"></td><td><pre>    <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-70deg<span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-10%<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="50"></td><td><pre>            <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-70deg<span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-10%<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="51"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="52"></td><td><pre>  <span class="token selector">75%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="53"></td><td><pre>    <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-20deg<span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-20%<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="54"></td><td><pre>            <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-20deg<span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-20%<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="55"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="56"></td><td><pre>  <span class="token selector">100%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="57"></td><td><pre>    <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-70deg<span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-40%<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="58"></td><td><pre>            <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-70deg<span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-40%<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="59"></td><td><pre>    <span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="60"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="61"></td><td><pre><span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="62"></td><td><pre>&lt;/style></pre></td></tr></table></figure><h4 id="3-html-代码"><a class="anchor" href="#3-html-代码">#</a> 3. HTML 代码</h4>
<figure class="highlight html"><figcaption data-lang="HTML"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span><span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 120px<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">bottom</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span> <span class="token punctuation">></span></span></pre></td></tr><tr><td data-num="2"></td><td><pre><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>particletext fire<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">font-size</span><span class="token punctuation">:</span>48px<span class="token punctuation">;</span><span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>This is fires<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span></pre></td></tr><tr><td data-num="3"></td><td><pre><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre></td></tr></table></figure><h3 id="0x003-lines-特效"><a class="anchor" href="#0x003-lines-特效">#</a> 0x003 Lines 特效</h3>
<h4 id="1-js-代码-2"><a class="anchor" href="#1-js-代码-2">#</a> 1. JS 代码</h4>
<figure class="highlight javascript"><figcaption data-lang="javascript"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token operator">&lt;</span>script<span class="token operator">></span></pre></td></tr><tr><td data-num="2"></td><td><pre><span class="token keyword">function</span> <span class="token function">lines</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span> </pre></td></tr><tr><td data-num="3"></td><td><pre>   $<span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".particletext.lines"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span> </pre></td></tr><tr><td data-num="4"></td><td><pre>      <span class="token keyword">var</span> linecount <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">width</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">/</span><span class="token number">50</span><span class="token punctuation">)</span><span class="token operator">*</span><span class="token number">10</span><span class="token punctuation">;</span> </pre></td></tr><tr><td data-num="5"></td><td><pre>      <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;=</span> linecount<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span> </pre></td></tr><tr><td data-num="6"></td><td><pre>         <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">'&lt;span class="particle" style="top:'</span> <span class="token operator">+</span> $<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">30</span><span class="token punctuation">,</span><span class="token number">30</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'%; left:'</span> <span class="token operator">+</span> $<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">10</span><span class="token punctuation">,</span><span class="token number">110</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'%;width:'</span> <span class="token operator">+</span> $<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'px; height:'</span> <span class="token operator">+</span> $<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">20</span><span class="token punctuation">,</span><span class="token number">80</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'%;animation-delay: -'</span> <span class="token operator">+</span> <span class="token punctuation">(</span>$<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">30</span><span class="token punctuation">)</span><span class="token operator">/</span><span class="token number">10</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'s;">&lt;/span>'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </pre></td></tr><tr><td data-num="7"></td><td><pre>      <span class="token punctuation">&#125;</span> </pre></td></tr><tr><td data-num="8"></td><td><pre>   <span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </pre></td></tr><tr><td data-num="9"></td><td><pre><span class="token punctuation">&#125;</span> </pre></td></tr><tr><td data-num="10"></td><td><pre>  jQuery<span class="token punctuation">.</span><span class="token function-variable function">rnd</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">m<span class="token punctuation">,</span>n</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="11"></td><td><pre>      m <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>m<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="12"></td><td><pre>      n <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="13"></td><td><pre>      <span class="token keyword">return</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token punctuation">(</span>n <span class="token operator">-</span> m <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token operator">+</span> m<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="14"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="15"></td><td><pre>  <span class="token function">lines</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="16"></td><td><pre><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span></pre></td></tr></table></figure><h4 id="2-css-代码-2"><a class="anchor" href="#2-css-代码-2">#</a> 2. CSS 代码</h4>
<figure class="highlight css"><figcaption data-lang="CSS"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token selector">&lt;style></pre></td></tr><tr><td data-num="2"></td><td><pre>.lines > .particle</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="3"></td><td><pre>  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="4"></td><td><pre>  <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>244<span class="token punctuation">,</span> 67<span class="token punctuation">,</span> 54<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="5"></td><td><pre>  <span class="token property">-webkit-animation</span><span class="token punctuation">:</span> lines 3s linear infinite<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="6"></td><td><pre>          <span class="token property">animation</span><span class="token punctuation">:</span> lines 3s linear infinite<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="7"></td><td><pre><span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="8"></td><td><pre><span class="token atrule"><span class="token rule">@-webkit-keyframes</span> lines</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="9"></td><td><pre>  <span class="token selector">0%, 50%, 100%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="10"></td><td><pre>    <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>0%<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="11"></td><td><pre>            <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>0%<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="12"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="13"></td><td><pre>  <span class="token selector">25%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="14"></td><td><pre>    <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>100%<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="15"></td><td><pre>            <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>100%<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="16"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="17"></td><td><pre>  <span class="token selector">75%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="18"></td><td><pre>    <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-100%<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="19"></td><td><pre>            <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-100%<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="20"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="21"></td><td><pre><span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="22"></td><td><pre><span class="token atrule"><span class="token rule">@keyframes</span> lines</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="23"></td><td><pre>  <span class="token selector">0%, 50%, 100%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="24"></td><td><pre>    <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>0%<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="25"></td><td><pre>            <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>0%<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="26"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="27"></td><td><pre>  <span class="token selector">25%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="28"></td><td><pre>    <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>100%<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="29"></td><td><pre>            <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>100%<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="30"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="31"></td><td><pre>  <span class="token selector">75%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="32"></td><td><pre>    <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-100%<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="33"></td><td><pre>            <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-100%<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="34"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="35"></td><td><pre><span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="36"></td><td><pre>&lt;/style></pre></td></tr></table></figure><h4 id="3-html-代码-2"><a class="anchor" href="#3-html-代码-2">#</a> 3. HTML 代码</h4>
<figure class="highlight html"><figcaption data-lang="HTML"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span><span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 120px<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">bottom</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span> <span class="token punctuation">></span></span> </pre></td></tr><tr><td data-num="2"></td><td><pre><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>particletext lines<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">font-size</span><span class="token punctuation">:</span>48px<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>This is lines<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span></pre></td></tr><tr><td data-num="3"></td><td><pre><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre></td></tr></table></figure><h3 id="0x004-hearts-特效"><a class="anchor" href="#0x004-hearts-特效">#</a> 0x004 Hearts 特效</h3>
<h4 id="1-js-代码-3"><a class="anchor" href="#1-js-代码-3">#</a> 1. JS 代码</h4>
<figure class="highlight javascript"><figcaption data-lang="javascript"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token operator">&lt;</span>script<span class="token operator">></span></pre></td></tr><tr><td data-num="2"></td><td><pre><span class="token keyword">function</span> <span class="token function">hearts</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span> </pre></td></tr><tr><td data-num="3"></td><td><pre>   $<span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".particletext.hearts"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span> </pre></td></tr><tr><td data-num="4"></td><td><pre>      <span class="token keyword">var</span> heartcount <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">width</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">/</span><span class="token number">50</span><span class="token punctuation">)</span><span class="token operator">*</span><span class="token number">5</span><span class="token punctuation">;</span> </pre></td></tr><tr><td data-num="5"></td><td><pre>      <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;=</span> heartcount<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span> </pre></td></tr><tr><td data-num="6"></td><td><pre>         <span class="token keyword">var</span> size <span class="token operator">=</span> <span class="token punctuation">(</span>$<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">60</span><span class="token punctuation">,</span><span class="token number">120</span><span class="token punctuation">)</span><span class="token operator">/</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </pre></td></tr><tr><td data-num="7"></td><td><pre>         <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">'&lt;span class="particle" style="top:'</span> <span class="token operator">+</span> $<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">20</span><span class="token punctuation">,</span><span class="token number">80</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'%; left:'</span> <span class="token operator">+</span> $<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">95</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'%;width:'</span> <span class="token operator">+</span> size <span class="token operator">+</span> <span class="token string">'px; height:'</span> <span class="token operator">+</span> size <span class="token operator">+</span> <span class="token string">'px;animation-delay: '</span> <span class="token operator">+</span> <span class="token punctuation">(</span>$<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">30</span><span class="token punctuation">)</span><span class="token operator">/</span><span class="token number">10</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'s;">&lt;/span>'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </pre></td></tr><tr><td data-num="8"></td><td><pre>      <span class="token punctuation">&#125;</span> </pre></td></tr><tr><td data-num="9"></td><td><pre>   <span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </pre></td></tr><tr><td data-num="10"></td><td><pre><span class="token punctuation">&#125;</span> </pre></td></tr><tr><td data-num="11"></td><td><pre>  jQuery<span class="token punctuation">.</span><span class="token function-variable function">rnd</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">m<span class="token punctuation">,</span>n</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="12"></td><td><pre>      m <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>m<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="13"></td><td><pre>      n <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="14"></td><td><pre>      <span class="token keyword">return</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token punctuation">(</span>n <span class="token operator">-</span> m <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token operator">+</span> m<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="15"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="16"></td><td><pre>  <span class="token function">hearts</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="17"></td><td><pre><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span></pre></td></tr></table></figure><h4 id="2-css-代码-3"><a class="anchor" href="#2-css-代码-3">#</a> 2. CSS 代码</h4>
<figure class="highlight css"><figcaption data-lang="CSS"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token selector">&lt;style></pre></td></tr><tr><td data-num="2"></td><td><pre>.hearts > .particle</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="3"></td><td><pre>  <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="4"></td><td><pre>  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="5"></td><td><pre>  <span class="token property">background-color</span><span class="token punctuation">:</span> #cc2a5d<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="6"></td><td><pre>  <span class="token property">-webkit-animation</span><span class="token punctuation">:</span> hearts 3s ease-in infinite<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="7"></td><td><pre>          <span class="token property">animation</span><span class="token punctuation">:</span> hearts 3s ease-in infinite<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="8"></td><td><pre><span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="9"></td><td><pre><span class="token selector">.hearts > .particle:before, .hearts > .particle:after</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="10"></td><td><pre>  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="11"></td><td><pre>  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="12"></td><td><pre>  <span class="token property">border-radius</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="13"></td><td><pre>  <span class="token property">top</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="14"></td><td><pre>  <span class="token property">left</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="15"></td><td><pre>  <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="16"></td><td><pre>  <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="17"></td><td><pre>  <span class="token property">background-color</span><span class="token punctuation">:</span> #cc2a5d<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="18"></td><td><pre><span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="19"></td><td><pre><span class="token selector">.hearts > .particle:before</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="20"></td><td><pre>  <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span>-50%<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="21"></td><td><pre>          <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span>-50%<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="22"></td><td><pre><span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="23"></td><td><pre><span class="token selector">.hearts > .particle:after</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="24"></td><td><pre>  <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-50%<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="25"></td><td><pre>          <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-50%<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="26"></td><td><pre><span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="27"></td><td><pre><span class="token atrule"><span class="token rule">@-webkit-keyframes</span> hearts</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="28"></td><td><pre>  <span class="token selector">0%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="29"></td><td><pre>    <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="30"></td><td><pre>    <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="31"></td><td><pre>            <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="32"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="33"></td><td><pre>  <span class="token selector">20%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="34"></td><td><pre>    <span class="token property">opacity</span><span class="token punctuation">:</span> 0.8<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="35"></td><td><pre>    <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> -20%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="36"></td><td><pre>            <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> -20%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="37"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="38"></td><td><pre>  <span class="token selector">100%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="39"></td><td><pre>    <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="40"></td><td><pre>    <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> -1000%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="41"></td><td><pre>            <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> -1000%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="42"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="43"></td><td><pre><span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="44"></td><td><pre><span class="token atrule"><span class="token rule">@keyframes</span> hearts</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="45"></td><td><pre>  <span class="token selector">0%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="46"></td><td><pre>    <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="47"></td><td><pre>    <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="48"></td><td><pre>            <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="49"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="50"></td><td><pre>  <span class="token selector">20%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="51"></td><td><pre>    <span class="token property">opacity</span><span class="token punctuation">:</span> 0.8<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="52"></td><td><pre>    <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> -20%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="53"></td><td><pre>            <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> -20%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="54"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="55"></td><td><pre>  <span class="token selector">100%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="56"></td><td><pre>    <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="57"></td><td><pre>    <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> -1000%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="58"></td><td><pre>            <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> -1000%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="59"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="60"></td><td><pre><span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="61"></td><td><pre>&lt;/style></pre></td></tr></table></figure><h4 id="3-html-代码-3"><a class="anchor" href="#3-html-代码-3">#</a> 3. HTML 代码</h4>
<figure class="highlight html"><figcaption data-lang="HTML"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span><span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 120px<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">bottom</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span> <span class="token punctuation">></span></span></pre></td></tr><tr><td data-num="2"></td><td><pre><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>particletext hearts<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">font-size</span><span class="token punctuation">:</span>48px<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>This is hearts<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span></pre></td></tr><tr><td data-num="3"></td><td><pre><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre></td></tr></table></figure><h3 id="0x005-bubbles-特效"><a class="anchor" href="#0x005-bubbles-特效">#</a> 0x005 Bubbles 特效</h3>
<h4 id="1-js-代码-4"><a class="anchor" href="#1-js-代码-4">#</a> 1. JS 代码</h4>
<figure class="highlight javascript"><figcaption data-lang="javascript"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token operator">&lt;</span>script<span class="token operator">></span></pre></td></tr><tr><td data-num="2"></td><td><pre><span class="token keyword">function</span> <span class="token function">bubbles</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span> </pre></td></tr><tr><td data-num="3"></td><td><pre>   $<span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".particletext.bubbles"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span> </pre></td></tr><tr><td data-num="4"></td><td><pre>      <span class="token keyword">var</span> bubblecount <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">width</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">/</span><span class="token number">50</span><span class="token punctuation">)</span><span class="token operator">*</span><span class="token number">10</span><span class="token punctuation">;</span> </pre></td></tr><tr><td data-num="5"></td><td><pre>      <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;=</span> bubblecount<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span> </pre></td></tr><tr><td data-num="6"></td><td><pre>         <span class="token keyword">var</span> size <span class="token operator">=</span> <span class="token punctuation">(</span>$<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">40</span><span class="token punctuation">,</span><span class="token number">80</span><span class="token punctuation">)</span><span class="token operator">/</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </pre></td></tr><tr><td data-num="7"></td><td><pre>         <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">'&lt;span class="particle" style="top:'</span> <span class="token operator">+</span> $<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">20</span><span class="token punctuation">,</span><span class="token number">80</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'%; left:'</span> <span class="token operator">+</span> $<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">95</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'%;width:'</span> <span class="token operator">+</span> size <span class="token operator">+</span> <span class="token string">'px; height:'</span> <span class="token operator">+</span> size <span class="token operator">+</span> <span class="token string">'px;animation-delay: '</span> <span class="token operator">+</span> <span class="token punctuation">(</span>$<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">30</span><span class="token punctuation">)</span><span class="token operator">/</span><span class="token number">10</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'s;">&lt;/span>'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </pre></td></tr><tr><td data-num="8"></td><td><pre>      <span class="token punctuation">&#125;</span> </pre></td></tr><tr><td data-num="9"></td><td><pre>   <span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </pre></td></tr><tr><td data-num="10"></td><td><pre><span class="token punctuation">&#125;</span> </pre></td></tr><tr><td data-num="11"></td><td><pre>  jQuery<span class="token punctuation">.</span><span class="token function-variable function">rnd</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">m<span class="token punctuation">,</span>n</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="12"></td><td><pre>      m <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>m<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="13"></td><td><pre>      n <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="14"></td><td><pre>      <span class="token keyword">return</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token punctuation">(</span>n <span class="token operator">-</span> m <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token operator">+</span> m<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="15"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="16"></td><td><pre>  <span class="token function">bubbles</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="17"></td><td><pre><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span></pre></td></tr></table></figure><h4 id="2-css-代码-4"><a class="anchor" href="#2-css-代码-4">#</a> 2. CSS 代码</h4>
<figure class="highlight css"><figcaption data-lang="CSS"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token selector">&lt;style></pre></td></tr><tr><td data-num="2"></td><td><pre>&lt;style></pre></td></tr><tr><td data-num="3"></td><td><pre>.bubbles > .particle</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="4"></td><td><pre>  <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="5"></td><td><pre>  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="6"></td><td><pre>  <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>33<span class="token punctuation">,</span> 150<span class="token punctuation">,</span> 243<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="7"></td><td><pre>  <span class="token property">-webkit-animation</span><span class="token punctuation">:</span> bubbles 3s ease-in infinite<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="8"></td><td><pre>          <span class="token property">animation</span><span class="token punctuation">:</span> bubbles 3s ease-in infinite<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="9"></td><td><pre>  <span class="token property">border-radius</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="10"></td><td><pre><span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="11"></td><td><pre><span class="token atrule"><span class="token rule">@-webkit-keyframes</span> bubbles</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="12"></td><td><pre>  <span class="token selector">0%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="13"></td><td><pre>    <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="14"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="15"></td><td><pre>  <span class="token selector">20%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="16"></td><td><pre>    <span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="17"></td><td><pre>    <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> -20%<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="18"></td><td><pre>            <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> -20%<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="19"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="20"></td><td><pre>  <span class="token selector">100%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="21"></td><td><pre>    <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="22"></td><td><pre>    <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> -1000%<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="23"></td><td><pre>            <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> -1000%<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="24"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="25"></td><td><pre><span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="26"></td><td><pre></pre></td></tr><tr><td data-num="27"></td><td><pre><span class="token atrule"><span class="token rule">@keyframes</span> bubbles</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="28"></td><td><pre>  <span class="token selector">0%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="29"></td><td><pre>    <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="30"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="31"></td><td><pre>  <span class="token selector">20%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="32"></td><td><pre>    <span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="33"></td><td><pre>    <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> -20%<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="34"></td><td><pre>            <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> -20%<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="35"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="36"></td><td><pre>  <span class="token selector">100%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="37"></td><td><pre>    <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="38"></td><td><pre>    <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> -1000%<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="39"></td><td><pre>            <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> -1000%<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="40"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="41"></td><td><pre><span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="42"></td><td><pre>&lt;/style></pre></td></tr></table></figure><h4 id="3-html-代码-4"><a class="anchor" href="#3-html-代码-4">#</a> 3. HTML 代码</h4>
<figure class="highlight html"><figcaption data-lang="HTML"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span><span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 120px<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">bottom</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span> <span class="token punctuation">></span></span> </pre></td></tr><tr><td data-num="2"></td><td><pre><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>particletext bubbles<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">font-size</span><span class="token punctuation">:</span>48px<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>This is bubbles<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span></pre></td></tr><tr><td data-num="3"></td><td><pre><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre></td></tr></table></figure><h3 id="0x006-confetti-特效"><a class="anchor" href="#0x006-confetti-特效">#</a> 0x006 Confetti 特效</h3>
<h4 id="1-js-代码-5"><a class="anchor" href="#1-js-代码-5">#</a> 1. JS 代码</h4>
<figure class="highlight javascript"><figcaption data-lang="javascript"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token operator">&lt;</span>script<span class="token operator">></span></pre></td></tr><tr><td data-num="2"></td><td><pre><span class="token keyword">function</span> <span class="token function">confetti</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span> </pre></td></tr><tr><td data-num="3"></td><td><pre>   $<span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".particletext.confetti"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span> </pre></td></tr><tr><td data-num="4"></td><td><pre>      <span class="token keyword">var</span> confetticount <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">width</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">/</span><span class="token number">50</span><span class="token punctuation">)</span><span class="token operator">*</span><span class="token number">10</span><span class="token punctuation">;</span> </pre></td></tr><tr><td data-num="5"></td><td><pre>      <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;=</span> confetticount<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span> </pre></td></tr><tr><td data-num="6"></td><td><pre>         <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">'&lt;span class="particle c'</span> <span class="token operator">+</span> $<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'" style="top:'</span> <span class="token operator">+</span> $<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">,</span><span class="token number">50</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'%; left:'</span> <span class="token operator">+</span> $<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">100</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'%;width:'</span> <span class="token operator">+</span> $<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">,</span><span class="token number">8</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'px; height:'</span> <span class="token operator">+</span> $<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'px;animation-delay: '</span> <span class="token operator">+</span> <span class="token punctuation">(</span>$<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">30</span><span class="token punctuation">)</span><span class="token operator">/</span><span class="token number">10</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'s;">&lt;/span>'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </pre></td></tr><tr><td data-num="7"></td><td><pre>      <span class="token punctuation">&#125;</span> </pre></td></tr><tr><td data-num="8"></td><td><pre>   <span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </pre></td></tr><tr><td data-num="9"></td><td><pre><span class="token punctuation">&#125;</span> </pre></td></tr><tr><td data-num="10"></td><td><pre>  jQuery<span class="token punctuation">.</span><span class="token function-variable function">rnd</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">m<span class="token punctuation">,</span>n</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="11"></td><td><pre>      m <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>m<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="12"></td><td><pre>      n <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="13"></td><td><pre>      <span class="token keyword">return</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token punctuation">(</span>n <span class="token operator">-</span> m <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token operator">+</span> m<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="14"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="15"></td><td><pre>  <span class="token function">confetti</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="16"></td><td><pre><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span></pre></td></tr></table></figure><h4 id="2-css-代码-5"><a class="anchor" href="#2-css-代码-5">#</a> 2. CSS 代码</h4>
<figure class="highlight css"><figcaption data-lang="CSS"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token selector">&lt;style></pre></td></tr><tr><td data-num="2"></td><td><pre>.confetti > .particle</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="3"></td><td><pre>  <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="4"></td><td><pre>  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="5"></td><td><pre>  <span class="token property">-webkit-animation</span><span class="token punctuation">:</span> confetti 3s ease-in infinite<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="6"></td><td><pre>          <span class="token property">animation</span><span class="token punctuation">:</span> confetti 3s ease-in infinite<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="7"></td><td><pre><span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="8"></td><td><pre><span class="token selector">.confetti > .particle.c1</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="9"></td><td><pre>  <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>76<span class="token punctuation">,</span> 175<span class="token punctuation">,</span> 80<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="10"></td><td><pre><span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="11"></td><td><pre><span class="token selector">.confetti > .particle.c2</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="12"></td><td><pre>  <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>156<span class="token punctuation">,</span> 39<span class="token punctuation">,</span> 176<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="13"></td><td><pre><span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="14"></td><td><pre><span class="token atrule"><span class="token rule">@-webkit-keyframes</span> confetti</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="15"></td><td><pre>  <span class="token selector">0%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="16"></td><td><pre>    <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="17"></td><td><pre>    <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>0%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="18"></td><td><pre>            <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>0%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="19"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="20"></td><td><pre>  <span class="token selector">10%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="21"></td><td><pre>    <span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="22"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="23"></td><td><pre>  <span class="token selector">35%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="24"></td><td><pre>    <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-800%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>270deg<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="25"></td><td><pre>            <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-800%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>270deg<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="26"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="27"></td><td><pre>  <span class="token selector">80%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="28"></td><td><pre>    <span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="29"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="30"></td><td><pre>  <span class="token selector">100%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="31"></td><td><pre>    <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="32"></td><td><pre>    <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>2000%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>1440deg<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="33"></td><td><pre>            <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>2000%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>1440deg<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="34"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="35"></td><td><pre><span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="36"></td><td><pre><span class="token atrule"><span class="token rule">@keyframes</span> confetti</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="37"></td><td><pre>  <span class="token selector">0%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="38"></td><td><pre>    <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="39"></td><td><pre>    <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>0%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="40"></td><td><pre>            <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>0%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="41"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="42"></td><td><pre>  <span class="token selector">10%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="43"></td><td><pre>    <span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="44"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="45"></td><td><pre>  <span class="token selector">35%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="46"></td><td><pre>    <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-800%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>270deg<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="47"></td><td><pre>            <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-800%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>270deg<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="48"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="49"></td><td><pre>  <span class="token selector">80%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="50"></td><td><pre>    <span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="51"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="52"></td><td><pre>  <span class="token selector">100%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="53"></td><td><pre>    <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="54"></td><td><pre>    <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>2000%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>1440deg<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="55"></td><td><pre>            <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>2000%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>1440deg<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="56"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="57"></td><td><pre><span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="58"></td><td><pre>&lt;/style></pre></td></tr></table></figure><h4 id="3-html-代码-5"><a class="anchor" href="#3-html-代码-5">#</a> 3. HTML 代码</h4>
<figure class="highlight html"><figcaption data-lang="HTML"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span><span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 120px<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">bottom</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span> <span class="token punctuation">></span></span> </pre></td></tr><tr><td data-num="2"></td><td><pre><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>particletext confetti<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">font-size</span><span class="token punctuation">:</span>48px<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>This is confetti<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span></pre></td></tr><tr><td data-num="3"></td><td><pre><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre></td></tr></table></figure><h3 id="0x007-sunbeams-特效"><a class="anchor" href="#0x007-sunbeams-特效">#</a> 0x007 Sunbeams 特效</h3>
<h4 id="1-js-代码-6"><a class="anchor" href="#1-js-代码-6">#</a> 1. JS 代码</h4>
<figure class="highlight javascript"><figcaption data-lang="javascript"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token operator">&lt;</span>script<span class="token operator">></span></pre></td></tr><tr><td data-num="2"></td><td><pre><span class="token keyword">function</span> <span class="token function">sunbeams</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span> </pre></td></tr><tr><td data-num="3"></td><td><pre>   $<span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".particletext.sunbeams"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span> </pre></td></tr><tr><td data-num="4"></td><td><pre>      <span class="token keyword">var</span> linecount <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">width</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">/</span><span class="token number">50</span><span class="token punctuation">)</span><span class="token operator">*</span><span class="token number">10</span><span class="token punctuation">;</span> </pre></td></tr><tr><td data-num="5"></td><td><pre>      <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;=</span> linecount<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span> </pre></td></tr><tr><td data-num="6"></td><td><pre>         <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">'&lt;span class="particle" style="top:'</span> <span class="token operator">+</span> $<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">50</span><span class="token punctuation">,</span><span class="token number">00</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'%; left:'</span> <span class="token operator">+</span> $<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">100</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'%;width:'</span> <span class="token operator">+</span> $<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'px; height:'</span> <span class="token operator">+</span> $<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">80</span><span class="token punctuation">,</span><span class="token number">160</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'%;animation-delay: -'</span> <span class="token operator">+</span> <span class="token punctuation">(</span>$<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">30</span><span class="token punctuation">)</span><span class="token operator">/</span><span class="token number">10</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'s;">&lt;/span>'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </pre></td></tr><tr><td data-num="7"></td><td><pre>      <span class="token punctuation">&#125;</span> </pre></td></tr><tr><td data-num="8"></td><td><pre>   <span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </pre></td></tr><tr><td data-num="9"></td><td><pre><span class="token punctuation">&#125;</span> </pre></td></tr><tr><td data-num="10"></td><td><pre>  jQuery<span class="token punctuation">.</span><span class="token function-variable function">rnd</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">m<span class="token punctuation">,</span>n</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="11"></td><td><pre>      m <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>m<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="12"></td><td><pre>      n <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="13"></td><td><pre>      <span class="token keyword">return</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token punctuation">(</span>n <span class="token operator">-</span> m <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token operator">+</span> m<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="14"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="15"></td><td><pre>  <span class="token function">sunbeams</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="16"></td><td><pre><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span></pre></td></tr></table></figure><h4 id="2-css-代码-6"><a class="anchor" href="#2-css-代码-6">#</a> 2. CSS 代码</h4>
<figure class="highlight css"><figcaption data-lang="CSS"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token selector">&lt;style></pre></td></tr><tr><td data-num="2"></td><td><pre>.sunbeams > .particle</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="3"></td><td><pre>  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="4"></td><td><pre>  <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>253<span class="token punctuation">,</span> 216<span class="token punctuation">,</span> 53<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="5"></td><td><pre>  <span class="token property">-webkit-animation</span><span class="token punctuation">:</span> sunbeams 3s linear infinite<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="6"></td><td><pre>          <span class="token property">animation</span><span class="token punctuation">:</span> sunbeams 3s linear infinite<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="7"></td><td><pre><span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="8"></td><td><pre><span class="token atrule"><span class="token rule">@-webkit-keyframes</span> sunbeams</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="9"></td><td><pre>  <span class="token selector">0%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="10"></td><td><pre>    <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>40%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="11"></td><td><pre>            <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>40%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="12"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="13"></td><td><pre>  <span class="token selector">50%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="14"></td><td><pre>    <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-40%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>180deg<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="15"></td><td><pre>            <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-40%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>180deg<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="16"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="17"></td><td><pre>  <span class="token selector">100%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="18"></td><td><pre>    <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>40%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="19"></td><td><pre>            <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>40%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="20"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="21"></td><td><pre>  <span class="token selector">0%,14%,17%,43%,53%,71%,80%,94%,100%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="22"></td><td><pre>    <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="23"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="24"></td><td><pre>  <span class="token selector">6%,15%,24%,28%,48%,55%,78%,82%,99%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="25"></td><td><pre>    <span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="26"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="27"></td><td><pre><span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="28"></td><td><pre><span class="token atrule"><span class="token rule">@keyframes</span> sunbeams</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="29"></td><td><pre>  <span class="token selector">0%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="30"></td><td><pre>    <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>40%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="31"></td><td><pre>            <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>40%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="32"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="33"></td><td><pre>  <span class="token selector">50%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="34"></td><td><pre>    <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-40%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>180deg<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="35"></td><td><pre>            <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-40%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>180deg<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="36"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="37"></td><td><pre>  <span class="token selector">100%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="38"></td><td><pre>    <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>40%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="39"></td><td><pre>            <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>40%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span><span class="token punctuation">;</span></pre></td></tr><tr><td data-num="40"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="41"></td><td><pre>  <span class="token selector">0%,14%,17%,43%,53%,71%,80%,94%,100%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="42"></td><td><pre>    <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="43"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="44"></td><td><pre>  <span class="token selector">6%,15%,24%,28%,48%,55%,78%,82%,99%</span> <span class="token punctuation">&#123;</span></pre></td></tr><tr><td data-num="45"></td><td><pre>    <span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span></pre></td></tr><tr><td data-num="46"></td><td><pre>  <span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="47"></td><td><pre><span class="token punctuation">&#125;</span></pre></td></tr><tr><td data-num="48"></td><td><pre>&lt;/style></pre></td></tr></table></figure><h4 id="3-html-代码-6"><a class="anchor" href="#3-html-代码-6">#</a> 3. HTML 代码</h4>
<figure class="highlight html"><figcaption data-lang="HTML"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span><span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 120px<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">bottom</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span> <span class="token punctuation">></span></span></pre></td></tr><tr><td data-num="2"></td><td><pre><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>particletext sunbeams<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">font-size</span><span class="token punctuation">:</span>48px<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>This is sunbeams<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span></pre></td></tr><tr><td data-num="3"></td><td><pre><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></pre></td></tr></table></figure>
      <div class="tags">
          <a href="/tags/jQuery-CSS3/" rel="tag"><i class="ic i-tag"></i> jQuery+CSS3</a>
          <a href="/tags/%E7%B2%92%E5%AD%90%E7%89%B9%E6%95%88/" rel="tag"><i class="ic i-tag"></i> 粒子特效</a>
      </div>
  </div>

   <footer>

    <div class="meta">
  <span class="item">
    <span class="icon">
      <i class="ic i-calendar-check"></i>
    </span>
    <span class="text">更新于</span>
    <time title="修改时间：2021-08-24 16:10:38" itemprop="dateModified" datetime="2021-08-24T16:10:38+08:00">2021-08-24</time>
  </span>
</div>

      
<div class="reward">
  <button><i class="ic i-heartbeat"></i> 赞赏</button>
  <p>请我喝[茶]~(￣▽￣)~*</p>
  <div id="qr">
      
      <div>
        <img data-src="/images/wechatpay.png" alt="逸尘 微信支付">
        <p>微信支付</p>
      </div>
      
      <div>
        <img data-src="/images/alipay.png" alt="逸尘 支付宝">
        <p>支付宝</p>
      </div>
      
      <div>
        <img data-src="/images/paypal.png" alt="逸尘 贝宝">
        <p>贝宝</p>
      </div>
  </div>
</div>

      

<div id="copyright">
<ul>
  <li class="author">
    <strong>本文作者： </strong>逸尘 <i class="ic i-at"><em>@</em></i>逸尘
  </li>
  <li class="link">
    <strong>本文链接：</strong>
    <a href="https://yichenm.github.io.git/2020/03/27/blog/jQuery+CSS3/" title="文字背景粒子特效">https://yichenm.github.io.git/2020/03/27/blog/jQuery+CSS3/</a>
  </li>
  <li class="license">
    <strong>版权声明： </strong>本站所有文章除特别声明外，均采用 <span class="exturl" data-url="aHR0cHM6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL2xpY2Vuc2VzL2J5LW5jLXNhLzQuMC9kZWVkLnpo"><i class="ic i-creative-commons"><em>(CC)</em></i>BY-NC-SA</span> 许可协议。转载请注明出处！
  </li>
</ul>
</div>

  </footer>

</article>

  </div>
  

<div class="post-nav">
    <div class="item left">
      

  <a href="/2020/03/24/blog/Blog/" itemprop="url" rel="prev" data-background-image="https:&#x2F;&#x2F;tva1.sinaimg.cn&#x2F;mw690&#x2F;6833939bly1gipewkhf1zj20zk0m81kx.jpg" title="个人博客搭建">
  <span class="type">上一篇</span>
  <span class="category"><i class="ic i-flag"></i> 博客篇</span>
  <h3>个人博客搭建</h3>
  </a>

    </div>
    <div class="item right">
      

  <a href="/2020/04/12/computer-science/java/course-1/week-1/" itemprop="url" rel="next" data-background-image="https:&#x2F;&#x2F;tva1.sinaimg.cn&#x2F;mw690&#x2F;6833939bly1gicm0n457cj20zk0m8e81.jpg" title="第1周 计算">
  <span class="type">下一篇</span>
  <span class="category"><i class="ic i-flag"></i> 零基础学Java语言-</span>
  <h3>第1周 计算</h3>
  </a>

    </div>
</div>

  
  <div class="wrap" id="comments"></div>


        </div>
        <div id="sidebar">
          

<div class="inner">

  <div class="panels">
    <div class="inner">
      <div class="contents panel pjax" data-title="文章目录">
          <ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%89%8D%E8%A8%80"><span class="toc-number">1.</span> <span class="toc-text"> 前言</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#0x001-%E7%89%B9%E6%95%88%E6%BC%94%E7%A4%BA"><span class="toc-number">2.</span> <span class="toc-text"> 0x001 特效演示</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#0x002-fires-%E7%89%B9%E6%95%88"><span class="toc-number">3.</span> <span class="toc-text"> 0x002 Fires 特效</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-js-%E4%BB%A3%E7%A0%81"><span class="toc-number">3.1.</span> <span class="toc-text"> 1. JS 代码</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-css-%E4%BB%A3%E7%A0%81"><span class="toc-number">3.2.</span> <span class="toc-text"> 2. CSS 代码</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-html-%E4%BB%A3%E7%A0%81"><span class="toc-number">3.3.</span> <span class="toc-text"> 3. HTML 代码</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#0x003-lines-%E7%89%B9%E6%95%88"><span class="toc-number">4.</span> <span class="toc-text"> 0x003 Lines 特效</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-js-%E4%BB%A3%E7%A0%81-2"><span class="toc-number">4.1.</span> <span class="toc-text"> 1. JS 代码</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-css-%E4%BB%A3%E7%A0%81-2"><span class="toc-number">4.2.</span> <span class="toc-text"> 2. CSS 代码</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-html-%E4%BB%A3%E7%A0%81-2"><span class="toc-number">4.3.</span> <span class="toc-text"> 3. HTML 代码</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#0x004-hearts-%E7%89%B9%E6%95%88"><span class="toc-number">5.</span> <span class="toc-text"> 0x004 Hearts 特效</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-js-%E4%BB%A3%E7%A0%81-3"><span class="toc-number">5.1.</span> <span class="toc-text"> 1. JS 代码</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-css-%E4%BB%A3%E7%A0%81-3"><span class="toc-number">5.2.</span> <span class="toc-text"> 2. CSS 代码</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-html-%E4%BB%A3%E7%A0%81-3"><span class="toc-number">5.3.</span> <span class="toc-text"> 3. HTML 代码</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#0x005-bubbles-%E7%89%B9%E6%95%88"><span class="toc-number">6.</span> <span class="toc-text"> 0x005 Bubbles 特效</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-js-%E4%BB%A3%E7%A0%81-4"><span class="toc-number">6.1.</span> <span class="toc-text"> 1. JS 代码</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-css-%E4%BB%A3%E7%A0%81-4"><span class="toc-number">6.2.</span> <span class="toc-text"> 2. CSS 代码</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-html-%E4%BB%A3%E7%A0%81-4"><span class="toc-number">6.3.</span> <span class="toc-text"> 3. HTML 代码</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#0x006-confetti-%E7%89%B9%E6%95%88"><span class="toc-number">7.</span> <span class="toc-text"> 0x006 Confetti 特效</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-js-%E4%BB%A3%E7%A0%81-5"><span class="toc-number">7.1.</span> <span class="toc-text"> 1. JS 代码</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-css-%E4%BB%A3%E7%A0%81-5"><span class="toc-number">7.2.</span> <span class="toc-text"> 2. CSS 代码</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-html-%E4%BB%A3%E7%A0%81-5"><span class="toc-number">7.3.</span> <span class="toc-text"> 3. HTML 代码</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#0x007-sunbeams-%E7%89%B9%E6%95%88"><span class="toc-number">8.</span> <span class="toc-text"> 0x007 Sunbeams 特效</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-js-%E4%BB%A3%E7%A0%81-6"><span class="toc-number">8.1.</span> <span class="toc-text"> 1. JS 代码</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-css-%E4%BB%A3%E7%A0%81-6"><span class="toc-number">8.2.</span> <span class="toc-text"> 2. CSS 代码</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-html-%E4%BB%A3%E7%A0%81-6"><span class="toc-number">8.3.</span> <span class="toc-text"> 3. HTML 代码</span></a></li></ol></li></ol>
      </div>
      <div class="related panel pjax" data-title="系列文章">
        <ul>
          <li class="active"><a href="/2020/03/27/blog/jQuery+CSS3/" rel="bookmark" title="文字背景粒子特效">文字背景粒子特效</a></li>
        </ul>
      </div>
      <div class="overview panel" data-title="站点概览">
        <div class="author" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <img class="image" itemprop="image" alt="逸尘"
      data-src="/images/avatar.jpg">
  <p class="name" itemprop="name">逸尘</p>
  <div class="description" itemprop="description">专注于编程,分享生活,分享知识</div>
</div>

<nav class="state">
    <div class="item posts">
      <a href="/archives/">
        <span class="count">25</span>
        <span class="name">文章</span>
      </a>
    </div>
    <div class="item categories">
      <a href="/categories/">
        <span class="count">13</span>
        <span class="name">分类</span>
      </a>
    </div>
    <div class="item tags">
      <a href="/tags/">
        <span class="count">17</span>
        <span class="name">标签</span>
      </a>
    </div>
</nav>

<div class="social">
      <span class="exturl item github" data-url="aHR0cHM6Ly9naXRodWIuY29tL3lpY2hlbm0=" title="https:&#x2F;&#x2F;github.com&#x2F;yichenm"><i class="ic i-github"></i></span>
      <span class="exturl item twitter" data-url="aHR0cHM6Ly90d2l0dGVyLmNvbS95b3VybmFtZQ==" title="https:&#x2F;&#x2F;twitter.com&#x2F;yourname"><i class="ic i-twitter"></i></span>
      <span class="exturl item zhihu" data-url="aHR0cHM6Ly93d3cuemhpaHUuY29tL3Blb3BsZS95b3VybmFtZQ==" title="https:&#x2F;&#x2F;www.zhihu.com&#x2F;people&#x2F;yourname"><i class="ic i-zhihu"></i></span>
      <span class="exturl item music" data-url="aHR0cHM6Ly9tdXNpYy4xNjMuY29tLyMvdXNlci9ob21lP2lkPXlvdXJpZA==" title="https:&#x2F;&#x2F;music.163.com&#x2F;#&#x2F;user&#x2F;home?id&#x3D;yourid"><i class="ic i-cloud-music"></i></span>
      <span class="exturl item weibo" data-url="aHR0cHM6Ly93ZWliby5jb20veW91cm5hbWU=" title="https:&#x2F;&#x2F;weibo.com&#x2F;yourname"><i class="ic i-weibo"></i></span>
      <span class="exturl item qq" data-url="aHR0cDovL3dwYS5xcS5jb20vbXNncmQ/dj0zJnVpbj0xNjYwNTk3MzcwJnNpdGU9cXEmbWVudT15ZXM=" title="http:&#x2F;&#x2F;wpa.qq.com&#x2F;msgrd?v&#x3D;3&amp;uin&#x3D;1660597370&amp;site&#x3D;qq&amp;menu&#x3D;yes"><i class="ic i-qq"></i></span>
</div>

<ul class="menu">
  
    
  <li class="item">
    <a href="/" rel="section"><i class="ic i-home"></i>首页</a>
  </li>

    
  <li class="item">
    <a href="/about/" rel="section"><i class="ic i-user"></i>关于</a>
  </li>

    
  <li class="item">
    <a href="/friends/" rel="section"><i class="ic i-heart"></i>友達</a>
  </li>

    
  <li class="item">
    <a href="/links/" rel="section"><i class="ic i-magic"></i>链接</a>
  </li>

    
  <li class="item">
    <a href="/musics/" rel="section"><i class="ic i-music"></i>音乐</a>
  </li>

    
  <li class="item">
    <a href="/movies/" rel="section"><i class="ic i-sakura"></i>视频</a>
  </li>

        
  <li class="item dropdown">
      <a href="javascript:void(0);"><i class="ic i-feather"></i>文章</a>
    <ul class="submenu">

        
  <li class="item">
    <a href="/archives/" rel="section"><i class="ic i-list-alt"></i>归档</a>
  </li>

        
  <li class="item">
    <a href="/categories/" rel="section"><i class="ic i-th"></i>分类</a>
  </li>

        
  <li class="item">
    <a href="/tags/" rel="section"><i class="ic i-tags"></i>标签</a>
  </li>

  </ul>

</ul>

      </div>
    </div>
  </div>

  <ul id="quick">
    <li class="prev pjax">
        <a href="/2020/03/24/blog/Blog/" rel="prev" title="上一篇"><i class="ic i-chevron-left"></i></a>
    </li>
    <li class="up"><i class="ic i-arrow-up"></i></li>
    <li class="down"><i class="ic i-arrow-down"></i></li>
    <li class="next pjax">
        <a href="/2020/04/12/computer-science/java/course-1/week-1/" rel="next" title="下一篇"><i class="ic i-chevron-right"></i></a>
    </li>
    <li class="percent"></li>
  </ul>
</div>


        </div>
        <div class="dimmer"></div>
      </div>
    </main>
    <footer id="footer">
      <div class="inner">
        <div class="widgets">
          
<div class="rpost pjax">
  <h2>随机文章</h2>
  <ul>
      
  <li class="item">
    
<div class="breadcrumb">
<a href="/categories/computer-science/" title="分类于 计算机科学">计算机科学</a>
<i class="ic i-angle-right"></i>
<a href="/categories/computer-science/note/" title="分类于 二进制杂谈">二进制杂谈</a>
<i class="ic i-angle-right"></i>
<a href="/categories/computer-science/note/Theme-Shoka-Documentation/" title="分类于 Theme Shoka Documentation">Theme Shoka Documentation</a>
</div>

    <span><a href="/2020/08/13/computer-science/note/theme-shoka-doc/" title="Hexo主题Shoka &amp; multi-markdown-it渲染器使用说明">Hexo主题Shoka & multi-markdown-it渲染器使用说明</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
</div>

    <span><a href="/2013/12/24/blog/long-title/" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam justo turpis, tincidunt ac convallis id.">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam justo turpis, tincidunt ac convallis id.</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/categories/blog/" title="分类于 博客篇">博客篇</a>
</div>

    <span><a href="/2020/03/15/blog/PicGo-GitHub/" title="PicGo+GitHub 图床搭建">PicGo+GitHub 图床搭建</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/categories/blog/" title="分类于 博客篇">博客篇</a>
</div>

    <span><a href="/2020/03/24/blog/Blog/" title="个人博客搭建">个人博客搭建</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
</div>

    <span><a href="/2019/07/25/blog/code-highlight/" title="Code Highlight Style test">Code Highlight Style test</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
</div>

    <span><a href="/2013/12/24/blog/elements/" title="Elements">Elements</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
</div>

    <span><a href="/2013/12/25/blog/excerpts/" title="Excerpts">Excerpts</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/categories/blog/" title="分类于 博客篇">博客篇</a>
</div>

    <span><a href="/2020/06/17/blog/BlogOpen/" title="Blog开源搭建教程">Blog开源搭建教程</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/categories/Foo/" title="分类于 Foo">Foo</a>
<i class="ic i-angle-right"></i>
<a href="/categories/Foo/Bar/" title="分类于 Bar">Bar</a>
<i class="ic i-angle-right"></i>
<a href="/categories/Foo/Bar/Baz/" title="分类于 Baz">Baz</a>
</div>

    <span><a href="/2013/12/24/blog/categories/" title="Categories">Categories</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
</div>

    <span><a href="/2013/12/25/blog/no-title/" title="未命名">未命名</a></span>
  </li>

  </ul>
</div>
<div>
  <h2>最新评论</h2>
  <ul class="leancloud-recent-comment"></ul>
</div>

        </div>
        <div class="status">
  <div class="copyright">
    
    &copy; 2020 – 
    <span itemprop="copyrightYear">2022</span>
    <span class="with-love">
      <i class="ic i-sakura rotate"></i>
    </span>
    <span class="author" itemprop="copyrightHolder">逸尘 @ Yi Chen</span>
    
  </div>
  <div class="powered-by">
    基于 <span class="exturl" data-url="aHR0cHM6Ly9oZXhvLmlv">Hexo</span> & Theme.<span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL2FtZWhpbWUvaGV4by10aGVtZS1zaG9rYQ==">Shoka</span>
  </div>
  <div>
  <img src="https://static.dy208.cn/o_1dfilp8ruo521thr1hvf18ji17soa.png" style="display:inline-block" />
    <a href="https://beian.miit.gov.cn/"  style="color:#808080" target="_blank">鄂ICP备2021014555号-1</a>
  <div/>
</div>

      </div>
    </footer>
  </div>
<script data-config type="text/javascript">
  var LOCAL = {
    path: '2020/03/27/blog/jQuery+CSS3/',
    favicon: {
      show: "（●´3｀●）やれやれだぜ",
      hide: "(´Д｀)大変だ！"
    },
    search : {
      placeholder: "文章搜索",
      empty: "关于 「 ${query} 」，什么也没搜到",
      stats: "${time} ms 内找到 ${hits} 条结果"
    },
    valine: true,fancybox: true,copyright: '复制成功，转载请遵守 <i class="ic i-creative-commons"></i>BY-NC-SA 协议。',
    ignores : [
      function(uri) {
        return uri.includes('#');
      },
      function(uri) {
        return new RegExp(LOCAL.path+"$").test(uri);
      }
    ]
  };
</script>

<script src="https://cdn.polyfill.io/v2/polyfill.js"></script>

<script src="//cdn.jsdelivr.net/combine/npm/pace-js@1.0.2/pace.min.js,npm/pjax@0.2.8/pjax.min.js,npm/whatwg-fetch@3.4.0/dist/fetch.umd.min.js,npm/animejs@3.2.0/lib/anime.min.js,npm/algoliasearch@4/dist/algoliasearch-lite.umd.js,npm/instantsearch.js@4/dist/instantsearch.production.min.js,npm/lozad@1/dist/lozad.min.js,npm/quicklink@2/dist/quicklink.umd.js"></script>

<script src="/js/app.js?v=0.2.5"></script>




</body>
</html>
